<div class="example-listbox-container">
  <!-- #docregion listbox -->
  <label class="example-listbox-label" id="example-language-label">
    Preferred Language
  </label>
  <ul cdkListbox
      [formControl]="languageCtrl"
      aria-labelledby="example-language-label"
      class="example-listbox">
    @for (language of languages; track language) {
      <li [cdkOption]="language" class="example-option">{{language}}</li>
    }
  </ul>
  <!-- #enddocregion listbox -->
</div>
<p>
  Your preferred language: <strong>{{languageCtrl.value | json}}</strong>&nbsp;
  <button (click)="languageCtrl.reset()">Reset</button>
</p>
